<template>
  <el-container>
    <!-- 左侧侧边栏 -->
    <el-aside
      :width="asideWidth"
      style="
        background-color: #0f2e4e;
        color: #fff;
        height: 100vh;
        transition: width 0.3s ease;
         position: fixed;
         top: 0;
         left: 0;
         z-index: 100;
        
      "
    >
      <div
        class="logo"
        style="
          padding: 20px;
          font-size: 20px;
          font-weight: bold;
          text-align: center;
        "
      >
        <i class="el-icon-menu"></i>
        <span v-if="asideWidth !== '60px'">WeBlog</span>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        background-color="#0f2e4e"
        text-color="#fff"
        active-text-color="#409EFF"
        router
      >
        <el-menu-item index="/five/six">
          <i class="el-icon-s-data"></i>
          <span v-if="asideWidth !== '60px'">仪表盘</span>
        </el-menu-item>
        <el-menu-item index="/five/seven">
          <i class="el-icon-document"></i>
          <span v-if="asideWidth !== '60px'">文章管理</span>
        </el-menu-item>
        <el-menu-item index="/five/eight">
          <i class="el-icon-folder"></i>
          <span v-if="asideWidth !== '60px'">分类管理</span>
        </el-menu-item>
        <el-menu-item index="/five/nine">
          <i class="el-icon-collection-tag"></i>
          <span v-if="asideWidth !== '60px'">标签管理</span>
        </el-menu-item>
        <el-menu-item index="/five/ten">
          <i class="el-icon-setting"></i>
          <span v-if="asideWidth !== '60px'">博客设置</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 顶部导航栏 -->
      <el-header
        style="
          background-color: #fff;
          border-bottom: 1px solid #e6e6e6;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
           position: fixed;
           top: 0;
           right: 0;
           left: 200px;
           z-index: 100;
           transition: left 0.3s ease;
        "
      >
        <div style="display: flex; align-items: center">
          <i
            class="el-icon-menu"
            style="margin-right: 10px; cursor: pointer"
            @click="toggleAside"
          ></i>
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="仪表盘" name="dashboard"></el-tab-pane>
            <el-tab-pane label="文章管理" name="article"></el-tab-pane>
            <el-tab-pane label="分类管理" name="category"></el-tab-pane>
            <el-tab-pane label="标签管理" name="tag"></el-tab-pane>
            <el-tab-pane label="博客设置" name="setting"></el-tab-pane>
          </el-tabs>
        </div>
        <div style="display: flex; align-items: center">
          <i class="el-icon-house"  @click="$router.push('/')" ></i>
          <i
            class="el-icon-refresh"
            style="margin: 0 15px; cursor: pointer"  @click="handleRefresh"
          ></i>
          <i class="el-icon-full-screen" style="cursor: pointer"></i>
          <el-dropdown style="margin-left: 15px">
            <div class="avatar">
              <img
                :src="tableData.avatar"
                alt="admin"
                style="
                  width: 32px;
                  height: 32px;
                  border-radius: 50%;
                  margin-right: 5px;
                "
              />
              <span>{{tableData.username}}</span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主要内容区域 -->
      <el-main style="background-color: #e5e7eb; padding: 20px; margin-left: 200px;  margin-top: 50px;" >
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { MessageBox } from 'element-ui'
export default {
  data() {
    return {
      activeTab: "dashboard",
      activeMenu: this.$route.path, // <-- 新增：用于控制左侧高亮
      asideWidth: "200px",
      tableData:[],
    };
  },
  created() {
    this.getList();
    
  },
  methods: {
     handleLogout() {
      MessageBox.confirm('确定要退出登录吗？', '退出确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认退出：清除登录状态（如token）
        localStorage.removeItem('authorization') // 假设用localStorage存储token
        // 跳转登录页面，这里假设登录页路由是/login
        this.$router.push('/four')
      }).catch(() => {
        // 取消退出，不做操作
        return false
      })
    },
      getList() {
      this.$axios
        .post(`/api/api/admin/detail`)
        .then((res) => {
          this.tableData = res.data.data;
          console.log(this.tableData, "1111");
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
      handleRefresh() {
    // 刷新当前页面
    location.reload();
  },
    handleTabClick(tab) {
      // 根据标签页name映射路由路径
      const routeMap = {
        dashboard: "/five/six",
        article: "/five/seven",
        category: "/five/eight",
        tag: "/five/nine",
        setting: "/five/ten",
      };
      // 跳转对应路由
      const targetRoute = routeMap[tab.name];
      // 只有当目标路由与当前路由不同时才跳转
      if (this.$route.path !== targetRoute) {
        this.$router.push(targetRoute);
      }
    },
    toggleAside() {
      this.asideWidth = this.asideWidth === "200px" ? "60px" : "200px";
    },
  },

  watch: {
    $route(to) {
      // 根据路由路径映射标签页name
      const tabMap = {
        "/five/six": "dashboard",
        "/five/seven": "article",
        "/five/eight": "category",
        "/five/nine": "tag",
        "/five/ten": "setting",
      };
      this.activeTab = tabMap[to.path] || "dashboard";
      // 同步左侧菜单激活项
      this.activeMenu = to.path;
    },
  },
};
</script>

<style scoped>
.avatar {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.el-menu-vertical-demo .el-menu-item {
  text-align: center;
}
.el-menu-vertical-demo .el-menu-item i {
  margin-right: 0;
 
  
}
</style>